<template>
  <div class="file">
    <a-upload-dragger
      v-model:fileList="fileList"
      name="pic"
      :multiple="false"
      :showUploadList="false"
      listType="picture"
      action="/upload/pic"
      directory
      :customRequest='customRequest'
      @change="handleChange"
    >
      <p class="ant-upload-text">单击或拖动文件到此区域</p>
    </a-upload-dragger>
    <div class="show acea-row row-middle">
      <a-progress :percent="percent" status="active" style="flex:1" />
      <a class="download" @click="download">下载</a>
    </div>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
import Compressor from 'compressorjs';
import { message } from 'ant-design-vue';
import common from 'static/js/common.js'
import jszip from 'jszip'
import { watch } from '@vue/runtime-core';

// const worker = new Worker('/js/worker.js')

export default {
  name:'File',
  setup(props) {
    let fileLength = ref(0)
    let count = ref(0)
    let percent = ref(0)
    let zip = new jszip()
    let img = zip.folder('images')

    let worker = null

    const customRequest = (file)=>{
      //自定义上传功能,此处暂不需要上传，故用此覆盖默认上传功能
      return false
    }

    watch(count,(e)=>{
      // console.log(e,fileLength.value)
      percent.value = Math.ceil(e/fileLength.value*100)
      if(percent.value == 100){
        worker.terminate(); //关闭线程
      }
    })

    const handleChange = info => {
      //开启线程
      worker = new Worker('/js/worker.js',{ name : 'myWorker' })

      let file = info.file.originFileObj
      if(percent.value == 100){
        // 重置进度条
      }
      // console.log(info,file)
      if(file.type.indexOf('image') != -1){
        fileLength.value++
      }
      if(file.type.indexOf('png') != -1){
        //png压缩
        common.file2DataURL(file,(e)=>{
          common.file2uint8array(e,file.type).then(async data=>{
            let quality = (props.quality*100).toString()
            worker.postMessage({data,quality,name:file.name})
            worker.onmessage = function(e){
              let result = e.data.result
              let name = e.data.name
              img.file(name, new Blob([result.data]), {base64: true});
              count.value++
            }
          })
        })
      }else{
        //jpg压缩
        new Compressor(file, {
          quality: props.quality,
          convertSize:Infinity,
          success(result) {
            // console.log('result',result,URL.createObjectURL(new Blob([result])))
            img.file(result.name, new Blob([result]), {base64: true});
            count.value++
          }
        })
      }
    };

    const download = ()=>{
      if(percent.value == 100){
        let loading = message.loading({
          content:'正在打包压缩包',
          duration:0
        })
        zip.generateAsync({type:"blob"}).then(function(content) {
          // console.log(URL.createObjectURL(content))
          //下载操作
          let link = document.createElement('a')
          link.download = 'images'
          link.style.display = 'none'
          link.href = URL.createObjectURL(content)
          document.body.appendChild(link)
          link.click()
          loading()
        });
      }
    }

    return {
      fileList: ref([]),
      handleChange,
      customRequest,
      download,
      percent,
    }
  },
  props:{
    quality:{
      type:[Number,String],
    }
  },
}
</script>

<style scoped>
  .file{
    background: #fff;
    padding: 24px;
  }
  .file .show{
    margin-top: 20px;
  }
  .file .show .download{
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    border-radius: 2px;
    margin-top: 20px;
    display: block;
    width: 80px;
    margin-bottom: 20px;
    margin-left: 20px;
  }
</style>